<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      :fixed="fixed"
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="todo-list" size="18" @click="btnsearchhistory()" />
      </template>
    </van-nav-bar>

    <van-popup
      v-model="searchhistoryshow"
      
      position="right"
      style="text-align:center"
      :style="{ width: '100%', height: '100%' }"
    >
      <van-nav-bar
        title="历史记录"
        left-text="返回"
        left-arrow
        @click-left="closesidebar()"
      />
      <div class="fonttype" v-show="fonttypelist.length >1">
            <template v-for="item in fonttypelist">
              <span :key="item.id" :class="{'active':item.id==activetype}" @click="changetype(item.id)">{{item.name}}</span>
            </template>
      </div>
      
      
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
        >
          
          <div class="SimpleBoxList"  >
            <template v-for="item in list">
              <div class="datehead" v-if="dateheadid.indexOf(item.id)>-1" :key="item.name+'|'+item.id">
                {{new Date(item.fmtdate).Format("yyyy年MM月dd日")}}
              </div>
              <div class="SimpleBox" :key="item.id" @click="sidebarclick(item.id)">
                <van-image
                  class="SimpleBoxImage"
                  fit="cover"
                  :src="item.imagepath"
                />
                <div class="SimpleBoxText">
                  {{item.content}}
                </div>
              </div>
            </template>
          </div>
        </van-list>
      </van-pull-refresh>
    </van-popup>

    <van-row type="flex" justify="center">
      <van-col span="18">
        <tofont></tofont>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import tofont from "@/components/toFont/index";
import { getsavefont,getfonttype } from "@/api/mixin";
import { Toast } from 'vant';
export default {
  name: "Img2Font",
  data() {
    return {
      activetype:0,
      fonttypelist:[{id:0,name:'全部',date:''}],
      searchhistoryshow: false,
      fixed:true,
      list: [],
      loading: false, //false加载完成 true加载中
      finished: false,  //全部加载完成
      refreshing: false, //刷新中
      error: false, //是否具有错误
      pagesize:10, //每次获取的记录数
      pageindex:1, //默认第1页
      running:false, //防止重复点击
      datehead:[], //卡片头部时间戳记录每个日期第一次出现的yyy-mm-dd
      dateheadid:[], //卡片头部时间戳记录每个日期第一次出现的id
    };
  },
  computed: {
    ...mapGetters(["FontToken"]),
  },
  created() {},
  mounted(){
    this.apifonttype();
  },
  methods: {
    //切换类型,修改type值，触发下拉刷新
    changetype(val){
      this.activetype =val;
      this.refreshing = true;
      this.onRefresh();
      
    },
    apifonttype(){
      getfonttype()
        .then(res=>{
          let data = res.data;
          this.fonttypelist.splice(1,this.fonttypelist.length-1);
          if(data.length>0){
            data.forEach(element => {
              let fonttypejson ={
                id:element.id,
                name:element.name,
                date:element.fmtdate
              }
              this.fonttypelist.push(fonttypejson);
            });
          }
          this.btnsaveshow = true;
        })
        .catch(err=>{
          console.log(err);
        })
    },
    closesidebar(){
      this.searchhistoryshow = false;
    },
    onClickLeft() {
      this.$router.back(-1);
    },
    btnsearchhistory() {
      this.searchhistoryshow = true;
    },
      //loading: 当组件滚动到底部时自动设置为true,onRefresh下拉刷新触发时手动设置为true
      //  每次取得数据后设置为false

      //refreshing: 默认为false,onRefresh下拉刷新触发时自动设置为true。
      //finished: 列表数据全部加载完成后，即取不出数据后设置为true,
      //      为true后触发不了load事件了，除非下拉刷新设置它为false


      //事件 下拉刷新：BEGIN  =》 list=null ,loading=true,finished=false ，触发load事件
      //事件 load:   BEGIN =》 取数据push2list 
    async onLoad() {  //加载sidebar
      if(this.running){
        Toast.fail('系统繁忙，请稍后再试');
        return
      }

      //下拉刷新，多一步清空list 
      if (this.refreshing) {
          this.pageindex = 1;
          this.list = [];
          this.refreshing = false;
      }

      await getsavefont(this.pagesize,this.pageindex,this.activetype)
        .then(res=>{
          let message = res.message;
          let data = res.data;

          //非空 本次数据还未取完
          if(data.TotalCount !=0 && this.pageindex<data.TotalPage ){
            data.pagedata.forEach(element => {
              this.list.push(element);
              let fmtdate = new Date(element.fmtdate).Format("yyyy-MM-dd");
              if(this.datehead.indexOf(fmtdate)<0){
                this.datehead.push(fmtdate);
                this.dateheadid.push(element.id);
              }
            });
            
            this.loading =false;
            this.pageindex = this.pageindex+1;
          }else if(data.TotalCount !=0 && this.pageindex==data.TotalPage ){
            //非空 本次数据已取完
            data.pagedata.forEach(element => {
              this.list.push(element);
              let fmtdate = new Date(element.fmtdate).Format("yyyy-MM-dd");
              if(this.datehead.indexOf(fmtdate)<0){
                this.datehead.push(fmtdate);
                this.dateheadid.push(element.id);
              }
            });
            this.loading =false;
            this.finished =true;
            this.pageindex = this.pageindex+1;
          }else{
            //kong 在catch处理
            this.loading =false;
            this.finished =true;
          }
          this.running = false;
        })
        .catch(err=>{
          this.error=true;
          this.loading=false;
          this.running = false;
        })

    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.datehead.splice(0,this.datehead.length);
      this.onLoad();
    },
    sidebarclick(val){ //点击sidebar触发跳转
      Toast.fail('还未开发');
      console.log(val);
    }
  },
  components: {
    tofont
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar{width:0;}
  .fonttype{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 17px;
    display: flex;
    border-bottom:1px solid #f5f5f5;
    text-align: center;
    flex-direction: row;
    justify-content:  flex-start;
    overflow-x: scroll;

    & span{
      height: 25px;
      line-height: 25px;
      margin-top: 15px;
      font-size: 16px;
      padding: 0 12px;
      flex: 0 0 auto;
      margin-right: 17px;
      border-radius: 12px;
      
      background-color: #f8f8f8;
      color: #7c7c7c;
    }
    & .active{
      background-color: #f8f8f8;
      color: #6b97b4;
    }
  }
  .SimpleBoxList{
    margin:30px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    & .datehead{
      color: #8c8c8c;
      font-size: 14px;
      text-align: left;
      height: 30px;
    }
    & .SimpleBox{
      margin-bottom: 14px;
      border-radius: 10px;
      flex: 0 1 173px;
      box-shadow: 5px 5px 10px #888888;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      
      & .SimpleBoxImage{
        flex: 0 1 126px;
        overflow: hidden;
      }
      & .SimpleBoxText{
        flex: 1 1 auto;
        font-size: 16px;
        text-align: left;
        color: #000;
        line-height: 22px;
        padding: 0 20px;
        box-sizing: border-box;
        white-space: pre-wrap;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        
      }
    }
  }
</style>